<template>
  <div class="my-dialog">
    <!-- vxe-modal组件，用于创建一个模态框 -->
    <vxe-modal
      show-zoom
      title="地图量算"
      resize
      :lock-view="false"
      :mask="false"
      v-model="visible"
      :width="340"
      :height="400"
      @close="handleClose"
      size="small"
      :position="{
        top: 40,
        left: 15,
      }"
    >
      <!-- 测量工具的容器 -->
      <div class="measure-box">
        <div
          v-for="item in measureList"
          :key="item.type"
          class="measure-item"
          :class="{ active: activeType === item.type }"
          @click="startMeasure(item.type)"
        >
          <i :class="['iconfont', item.icon]"></i>
          <span>{{ item.name }}</span>
        </div>
      </div>

      <!-- 底部操作区 -->
      <div class="measure-footer">
        <!-- 测量单位选择器 -->
        <div v-if="showUnit" class="measure-unit">
          <span>单位：</span>
          <el-select v-model="currentUnit" @change="changeUnit" class="unit-select">
            <el-option
              v-for="unit in unitList"
              :key="unit"
              :label="unit"
              :value="unit"
            ></el-option>
          </el-select>
        </div>

        <!-- 测量操作按钮 -->
        <div class="measure-actions">
          <el-button type="primary" @click="clearMeasure" class="clear-btn">清除测量</el-button>
        </div>
      </div>
    </vxe-modal>
  </div>
</template>

<script>
let measureTool = undefined;

export default {
  name: "MapMeasure",
  data() {
    return {
      visible: false, // 模态框是否可见
      activeType: "", // 当前选中的测量类型
      showUnit: false, // 是否显示单位选择器
      currentUnit: "米", // 当前选中的单位
      unitList: ["米", "千米"], // 单位列表
      measureObj: null, // 测量对象
      measureList: [
        {
          name: "距离",
          type: "distance",
          icon: "icon-kongjianjuli",
          config: {
            type: "2",
            unitType: "dis"
          }
        },
        {
          name: "面积",
          type: "area",
          icon: "icon-tiedixingzhuang",
          config: {
            type: "3",
            unitType: "area"
          }
        }
      ]
    };
  },
  mounted() {
    // 等待viewer初始化完成
    this.$nextTick(() => {
      if (window.viewer) {
        this.initMeasureTool();
      } else {
        const checkViewer = setInterval(() => {
          if (window.viewer) {
            this.initMeasureTool();
            clearInterval(checkViewer);
          }
        }, 100);
      }
    });
  },
  beforeDestroy() {
    if (measureTool) {
      measureTool.destroy();
      measureTool = undefined;
    }
  },
  methods: {
    open() {
      this.visible = true;
    },
    handleClose() {
      this.visible = false;
      this.$emit("menuClose", "mapMeasureRef");
      this.clearMeasure();
    },
    initMeasureTool() {
      if (!measureTool && window.viewer) {
        measureTool = new window.vis3d.measure.Tool(window.viewer);
        measureTool.on("endCreate", (ms) => {
          this.measureObj = ms;
          this.activeType = "";
        });

        measureTool.on("startEdit", (ms) => {
          this.showUnit = true;
          console.log(ms);
          this.setByUnitType(ms.unitType);
        });

        measureTool.on("endEdit", (ms) => {
          this.showUnit = false;
        });
      }
    },
    startMeasure(type) {
      if (!window.viewer || !measureTool) {
        this.$message.warning("地图未准备就绪，请稍后再试");
        return;
      }

      if (measureTool.nowDrawMeasureObj || measureTool.nowEditMeasureObj) {
        this.$message({
          message: "请结束上一次量算！",
          type: "warning",
        });
        return;
      }

      this.activeType = type;
      this.showUnit = true;

      const measureItem = this.measureList.find(item => item.type === type);
      if (!measureItem) return;

      const ms = measureTool.start(measureItem.config);
      ms.unitType = measureItem.config.unitType;
    },
    setByUnitType(unitType) {
      if (unitType) {
        this.unitList = unitType === "dis" ? ["米", "千米"] : ["平方米", "平方千米"];
        this.currentUnit = unitType === "dis" ? "米" : "平方米";
      }
    },
    changeUnit(unit) {
      if (!measureTool || !this.measureObj) return;
      measureTool.setMeasureObjUnit(this.measureObj, unit);
    },
    clearMeasure() {
      if (measureTool) {
        measureTool.clear();
        // 重置所有状态
        this.activeType = "";
        this.showUnit = false;
        this.measureObj = null;
        // 强制重置测量工具的状态
        measureTool.nowDrawMeasureObj = null;
        measureTool.nowEditMeasureObj = null;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.measure-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  margin-bottom: 20px;
}

.measure-item {
  width: 100px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  transition: all 0.3s;

  &:hover {
    border-color: #409eff;
  }

  &.active {
    border-color: #409eff;
    background-color: #ecf5ff;
  }

  i {
    font-size: 24px;
    margin-bottom: 8px;
  }

  span {
    font-size: 14px;
  }
}

.measure-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background-color: #fff;
}

.measure-unit {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;

  .unit-select {
    flex: 1;
  }
}

.measure-actions {
  display: flex;
  justify-content: center;

  .clear-btn {
    width: 100%;
    height: 40px;
    font-size: 16px;
  }
}
</style>
